<script lang='ts' setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { skuDelete,productChangeOnSelf } from '/@/api/commodity';
import { ElMessageBox, ElMessage } from 'element-plus';

// 引入组件
const router = useRouter();
const emit = defineEmits(['refreshFun'])

const props = withDefaults(defineProps<{
    skuTableData: any
}>(), {
    skuTableData: () => ([])
})


// 商品上下架状态修改
const changeStatusFun = async(type:string,obj: any) => {
	let params = {};
	if(type=="spu"){
		params = {
			spuId: obj.spuId,
			onSelf: obj.onSelf
		}
	}else if(type=="sku"){
		params = {
			skuId: obj.skuId,
			onSelf: obj.onSelf
		}
	}
	const { method } = await productChangeOnSelf(params);
	if(method == 'success'){
		ElMessage.success('修改成功');
	}
};

// 商品sku或spu删除
const delFun = (type: string,id?: number) => {
	ElMessageBox.confirm(`此操作将永久删除该规格项，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning', 
	}).then( async() => {
        let res = await skuDelete(id);
        emit('refreshFun')
        ElMessage.success('删除成功');
	}).catch(() => {});
}

</script>
<template>
    <section class="pl20" style="background-color:var(--next-bg-main-color);">
        <el-table ref="skuTableRef" :data="props.skuTableData" 
            :header-cell-style="{ backgroundColor: '#f8f8f8',}"
            :cell-style="{ backgroundColor: '#f8f8f8',}"
            :row-style="{ backgroundColor: '#f8f8f8', }" >
            <el-table-column type="selection" width="30" />
            <el-table-column label="SKU" width="90">
                <template #default="scope">
                    <span> {{scope.row.skuId }} </span>
                </template>
            </el-table-column>
            <el-table-column label="图片" width="90">
                <template #default="scope">
                    <el-image  class="borderRadius5" style="width:32px; height: 32px;" :src="scope.row.skuImgUrl" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column label="品牌">
                <template #default="scope">
                    <span>{{ scope.row.skuTypeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" width="380" class-name="aaaa">
                <template #default="scope">
                    <span class="ellipsis2">{{ scope.row.skuTypeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="属性" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuTypeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="规格" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuSerialName }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="零售价" align="center">
                <template #default="scope">
                    <span>￥{{ scope.row.retailPrice }}元</span>
                </template>
            </el-table-column>
            <el-table-column label="销售渠道" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuSerialName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <el-switch @click="changeStatusFun('sku',scope.row)" v-model="scope.row.onSelf"  :active-value=1 :inactive-value=0 />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
                <template #default="scope">
                    <el-button text type="primary" @click="delFun('sku',scope.row.skuId)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </section>
</template>

<style lang='scss' scoped>
	:deep(.el-table .aaaa .cell ){
		justify-content: left;
		padding-left: 5px;
	}
</style>